<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>6、过渡效果 列表过渡</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 实现位移过渡所需插件 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
	<!-- 实现渐进过渡所需插件 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
	<style type="text/css">
	.list-item {
	  display: inline-block;
	  margin-right: 10px;
	}
	.list-enter-active, .list-leave-active {
	  transition: all 1s;
	}
	.list-enter, .list-leave-active {
	  opacity: 0;
	  transform: translateY(30px);
	}	

	.flip-list-move {
	  transition: transform 1s;
	}	

	.list-complete-item {
	  transition: all 1s;
	  display: inline-block;
	  margin-right: 10px;
	}
	.list-complete-enter, .list-complete-leave-active {
	  opacity: 0;
	  transform: translateY(30px);
	}
	.list-complete-leave-active {
	  position: absolute;
	}	
	</style>
</head>
<body>
	<div id="list-demo" class="demo">
		<h3>列表的进入和离开过渡</h3>
		<button @click="add">Add</button>
		<button @click="remove">remove</button>
		<transition-group name="list" tag="p">
			<span v-for="item in items" :key="item" class="list-item">
				{{ item }}
			</span>
		</transition-group>
	</div><br/>

	<div id="flip-list-demo" class="demo">
		<h3>列表的位移过渡</h3>
		<button @click="shuffle">Shuffle</button>
		<transition-group name="flip-list" tag="ul">
			<li v-for="item in items" :key="item">
				{{ item }}
			</li>
		</transition-group>
	</div><br/>

	<div id="list-complete-demo" class="demo">
		<h3>列表的位移过渡</h3>
		<button @click="shuffle">Shuffle</button>
		<button @click="add">Add</button>
		<button @click="remove">Remove</button>
		<transition-group name="list-complete" tag="p">
			<span v-for="item in items" :key="item" class="list-complete-item">
				{{ item }}
			</span>
		</transition-group>
	</div><br/>

	<div id="staggered-list-demo">
		<h3>列表的渐进过渡</h3>
	  <input v-model="query">
	  <transition-group
	    name="staggered-fade"
	    tag="ul"
	    v-bind:css="false"
	    v-on:before-enter="beforeEnter"
	    v-on:enter="enter"
	    v-on:leave="leave"
	  >
	    <li
	      v-for="(item, index) in computedList"
	      v-bind:key="item.msg"
	      v-bind:data-index="index"
	    >{{ item.msg }}</li>
	  </transition-group>
	</div>

	<script type="text/javascript">
		/**
		 * 列表过渡
		 *
		 * 在进阶篇前面的demo中，介绍了：
		 * （1）单个节点的过渡
		 * （2）多个并列节点中选择一个过渡
		 *
		 * 但很多时候需要渲染一个列表，也就是同时过渡渲染多个节点，这里可以使用
		 * <transition-group> 组件
		 * 其具有以下特点：
		 *（1）以真实元素呈现，默认为span元素。可设置tag属性更换为其他元素
		 *（2）对每一个 v-for 列表元素总需要提供唯一的 key 属性值
		 */
		// 实例演示：列表的进入和离开过渡
		var vm = new Vue({
			el: '#list-demo',
			data: {
				items: [1,2,3,4,5,6,7,8,9],
				nextNum: 10
			},
			methods: {
			    randomIndex: function () {
			        return Math.floor(Math.random() * this.items.length)
			    },				
				add: function(){
					this.items.splice(this.randomIndex(), 0, this.nextNum++)
				},
				remove: function(){
					this.items.splice(this.randomIndex(), 1)
				}
			}
		})

		// 实例演示：列表的位移过渡
		// 打乱列表顺序
		var vm2 = new Vue({
			el: '#flip-list-demo',
			data: {
				items: [1,2,3,4,5,6,7,8,9]
			},
			methods: {
				shuffle: function(){
					this.items = _.shuffle(this.items)
				}
			}
		})
		var vm3 = new Vue({
			el: '#list-complete-demo',
			data: {
				items: [1,2,3,4,5,6,7,8,9],
				nextNum: 10
			},
			methods: {
				randomIndex: function () {
				  return Math.floor(Math.random() * this.items.length)
				},
				add: function () {
				  this.items.splice(this.randomIndex(), 0, this.nextNum++)
				},
				remove: function () {
				  this.items.splice(this.randomIndex(), 1)
				},
				shuffle: function () {
				  this.items = _.shuffle(this.items)
				}
			}
		})

		// 在很多网站使用邮箱登录账号系统时，当你输入@的时候后面下面会出现一排邮箱选项
		// xxx@qq.com、xxx@163.com等等，随着你的输入不断匹配减少选项，让你轻松选择
		// 在vue中，可以用列表的渐进过渡来实现它，思路是这样子：
		// 对输入表单用v-model与data数据绑定，当输入发生变化时，在methods或者computed里
		// 将输入与数据列表进行头部匹配，不匹配的列表项过渡隐藏
		var vm4 = new Vue({
			  el: '#staggered-list-demo',
			  data: {
			    query: '',
			    list: [
			      { msg: 'Bruce Lee' },
			      { msg: 'Jackie Chan' },
			      { msg: 'Chuck Norris' },
			      { msg: 'Jet Li' },
			      { msg: 'Kung Fury' }
			    ]
			  },
			  computed: {
			    computedList: function () {
			      var vm = this
			      return this.list.filter(function (item) {
			        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
			      })
			    }
			  },
			  methods: {
			    beforeEnter: function (el) {
			      el.style.opacity = 0
			      el.style.height = 0
			    },
			    enter: function (el, done) {
			      var delay = el.dataset.index * 150
			      setTimeout(function () {
			        Velocity(
			          el,
			          { opacity: 1, height: '1.6em' },
			          { complete: done }
			        )
			      }, delay)
			    },
			    leave: function (el, done) {
			      var delay = el.dataset.index * 150
			      setTimeout(function () {
			        Velocity(
			          el,
			          { opacity: 0, height: 0 },
			          { complete: done }
			        )
			      }, delay)
			    }
			  }
			})
		
	</script>
</body>
</html>